<template>
	<view class="box">
		<view class="input-wrap">
			<text class='icon-color'>*</text>  <text>车牌号:</text>
			<input v-model="carNo" class='input-value' type="number" placeholder="请输入车牌号" border="bottom" clearable
				maxlength="11">
			</input>
		</view>
		<view class="select-wrap">
				<text class='icon-color'>*</text> <text  >类型:</text>
				<view @click="selectTypeModel">
					<u-picker :show="showType" :columns="conditionList" title="类型" @cancel="cancel" @confirm="confirm"  keyName="label">
						
					</u-picker>
					<view class='selset-value' @click="selectTypeModel">
						<view>{{typeNmae}}</view>
						 <u-icon name="arrow-down" size="12" color="#333"></u-icon>
					</view>
				</view>   
		</view>
		<view class="select-wrap">
				<text class='icon-color'>*</text> <text  >门店名称:</text>
				<view class='selset-value' @click="selectStorModel">
					<view>{{storeName}}</view>
					<u-icon name="arrow-down" size="12" color="#333"></u-icon>
				</view>
		        <u-picker :show="showStore" keyName="label" :columns="storeList" title="门店" @cancel="storCancel" @confirm="storeConfirm"></u-picker>		    
		</view>
		<view class="select-wrap">
			<text class='icon-color'>*</text> <text>预约时间:</text>	
			<view class='selset-value' @click="timeShow">
				<view v-if='!appointmentEndTime'></view>
				<view style='font-size:12px' v-if='appointmentEndTime'>{{appointmentStartTime}}--{{appointmentEndTime}}</view>
				<u-icon name="arrow-down" size="12" color="#333"></u-icon>
			</view>
			<view class='time-value' v-if='timeShowStus'>
				<its-calendar :sta_num="0" :end_num="24" :int_num="intUnm" @getTime="TimeData"></its-calendar>
			</view>
			
		</view>
		<view class="input-wrap">
			<text class='icon-color'>*</text> <text>联系人:</text>
			<input v-model="appointmentUser" class='input-value'   placeholder="请输入联系人姓名" border="bottom" clearable
				>
			</input>
		</view>
		<view class="input-wrap">
			<text class='icon-color'>*</text> <text>联系电话:</text>
			<input v-model="appointmentUserPhone" class='input-value' type="tel"  placeholder="请输入联系电话" border="bottom" clearable
				maxlength="11">
			</input>
		</view>
		<view class="input-wrap">
			<text class='icon-color'>*</text> <text>描述:</text>
			<textarea class='textare-value' v-model="description" placeholder="如有其他问题可选择备注说明" count></textarea>
		</view>
		<view class="input-wrap">
			<button type="primary" plain="true" @click='upData' :disabled='upDataStatus'>提交</button>
		</view>
		
	</view>
</template>

<script>
	import itsCalendar from '@/components/its-calendar/its-calendar.vue';
	import {getMaintenanceStore,addMaintenanceStore} from '../../../common/api.js';
	export default {
		data() {
			return {
				intUnm:120,
				timeShowStus:false,
				carNo:'',
				type:null,
				typeNmae:'',
				storeId:null,
				storeName:'',
				appointmentStartTime:"",
				appointmentEndTime:'',
				appointmentUser:'',
				appointmentUserPhone:'',
				description:'',
				lat:null,
				lon:null,
				showType:false,
				showStore:false,
				conditionList:[
					['维修','保养','美容'],
				],
				storeList:[],
				selectConditionIndex:0,
				upDataStatus:false,
			}
		},
		components: {
			itsCalendar
		},
			
		methods: {
			upData(){
				console.log(this.carNo,this.type,this.storeName,this.appointmentStartTime,this.appointmentUser,this.appointmentUserPhone,this.description)
				if(this.carNo && this.type && this.storeName && this.appointmentStartTime && this.appointmentUser && this.appointmentUserPhone && this.description){
					addMaintenanceStore({
						carNo: this.carNo,
						type: this.type,
						storeId: this.storeId,
						storeName: this.storeName,
						appointmentStartTime: this.appointmentStartTime,
						appointmentEndTime: this.appointmentEndTime,
						appointmentUser: this.appointmentUser,
						appointmentUserPhone: this.appointmentUserPhone,
						description: this.description,
					}).then(res => {
						uni.$u.toast('创建成功');
						setTimeout(() => {
						    uni.navigateBack()
						}, 1000);
					})
				}else{
					uni.$u.toast('请填写带*的必填信息');
					return
				}
				
			},
			getData(info) {
				getMaintenanceStore({
					type: info
				}).then(res => {
					if(res.length>0){
						res.map((item)=>{
							item.id = item.id
							item.label = item.storeName
						})
						this.storeList = [res]
					}
				})
			},
			timeShow(){
				this.timeShowStus = true
			},
			 TimeData(e) {
				console.log(e)
				let time = new Date(e.time).getTime();
				this.appointmentStartTime = this.timeChange(time)		
				let time2 = time + 1000*60*this.intUnm
				this.appointmentEndTime = this.timeChange(time2)
				this.timeShowStus = false
			},
			timeChange(time){
				const timestamp = time // 待转换的时间戳
				const date = new Date(timestamp); // 根据时间戳创建Date对象
				const year = date.getFullYear(); // 获取年份
				const month = date.getMonth() + 1; // 获取月份，需要加1
				const day = date.getDate(); // 获取日期
				const hour = date.getHours(); // 获取小时
				const minute = date.getMinutes(); // 获取分钟
				const second = date.getSeconds(); // 获取秒数
				
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`; // 拼接成格式化后的日期字符串
			},
			selectTypeModel() {
			    this.showType = true;
			    this.selectConditionIndex = 0;
			},
			selectStorModel() {
			    this.showStore = true;
			    this.selectConditionIndex = 0;
			},
			cancel() {
			    // console.log('cancel');
			    this.showType = false
			},
			storCancel(){
				this.showStore = false
			},
			confirm(e) {
			    this.showType = false;  
				this.typeNmae = e.value[0]
				this.type = e.indexs[0]+1
				this.getData(e.indexs[0]+1)
			},
			storeConfirm(e){
				this.showStore = false;		
				this.storeName = e.value[0].label
				this.storeId = e.value[0].id
				this.lat = e.value[0].lat
				this.lon =e.value[0].lon
			}
			
		}
	}
</script>

<style>
	.icon-color{
		color:red
	}
	.select-wrap{
		margin-top:10px
	}
	.box{
		padding:10px 20px;
		background-color: #fff;
		border-radius: 20px;
		margin-top:10px
	}
	.input-wrap{
		margin-top:10px
	}
	.inpt{
		background: #fff;
	}
	.time-value{
		width:96%;
	}
	.selset-value{
		width:96%;
		text-align: left;
		height:24px;
		line-height:24px;
		padding:6px;
		border:1px solid #ccc;
		margin-top:6px;
		border-radius: 5px;
		display: flex;
		justify-content:space-between;
		align-items: center;
		
	}
	.input-value{
		width:96%;
		text-align: left;
		height:24px;
		line-height:24px;
		padding:6px;
		border:1px solid #ccc;
		margin-top:6px;
		border-radius: 5px;
	}
	.textare-value{
		border: 1px solid #ccc;
		margin-top: 6px;
		width: 96%;
		border-radius: 10px;
		padding:6px;
		height:100px;
	}
</style>
